<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>发布头条</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="static/css/style.css">
		<link rel="stylesheet" href="layui/css/layuibtn.css">
	</head>
	<style>
		.roomType {
			display: block!important;
			width: 100%;
			border-color: #D2D2D2!important;
			height: 38px;
			line-height: 1.3;
			border-width: 1px;
			border-style: solid;
			background-color: #fff;
			border-radius: 2px;
			padding-left: 10px;
		}
		.layui-table-cell {
			height: auto;
		}
	</style>

	<body>
		<div class="container">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>发布头条</legend>
			</fieldset>

			<form class="layui-form" action="">
				<!--<div class="layui-form-item">
					<label class="layui-form-label">房间id</label>
					<div class="layui-input-block">
						<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input roomId" readonly="true" style="color: #ccc;">
					</div>
				</div>-->


				<style type="text/css">
					.fileimg {
						margin-left: 0;
						margin-top: 0;
						width: 100px;
						z-index: 1;
					}
					
					.filename {
						margin-left: 15px;
						color: #B2B2B2;
						margin-top: 6x;
					}
					
					#fileimg {
						width: 100px;
						height: 38px!important;
						overflow: hidden;
						height: 100px;
						opacity: 0;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 10;
						margin: 0;
						padding: 0;
					}
				</style>
				<div class="layui-form-item">
					<label class="layui-form-label">图片</label>
					<div class="layui-input-block ">
						<img style="width: 150px;height: 150px;" class="logo" id="demo1" src="" />
					</div>
					<br />
					<div class="layui-input-block">
						<div class="layui-btn fileimg" id="test1">点击修改</div><span class="filename"></span>
						<input type="file" class="layui-btn fileimg" id="fileimg">
					</div>
				</div>
			

				<div class="layui-form-item">
					<button type="button" class="layui-btn" onclick="settijiao()">提交</button>
					<button type="button" class="layui-btn" id="quxiao">取消</button>
				</div>
				<!--<div class="layui-form-item">
					<label class="layui-form-label">上传头像</label>
					<div class="layui-input-block">
						<button type="button" class="layui-btn" id="test1"><i class="layui-icon">&#xe67c;</i>上传头像</button>
					</div>
				</div>-->
				<!--
                
                
				<div class="layui-form-item">
					<label class="layui-form-label">用户描述</label>
					<div class="layui-input-block">
						<textarea type="text" name="title" lay-verify="title" autocomplete="off" placeholder="用户描述" class="layui-input des" style="width: 500px;height: 100px;" disabled="disabled"></textarea>
					</div>
				</div>
-->
			</form>
		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/common.js"></script>
		<script src="layui/layui.js"></script>
		<script src="layer-v3.1.1/layer/mobile/layer.js"></script>
		<script>
			//$(function() {	
			layui.use(['element', 'layer'], function() {
				var $ = layui.jquery,
					element = layui.element;
				layer = layui.layer;

			});

			$.ajax({
				type: "post",
				url: baseurl + "/tt/queryOne",
				data: {
					id: 1
				},
				success: function(data) {
					//							alert("111")
					$(".logo").attr("src", data.data.img)
				}
			});

			$("#quxiao").click(function() {
				window.parent.location.reload();
			})

			$(".fileimg").on('change', function() {
				var fileimg = document.getElementById('fileimg').files[0].name;
				var file = document.getElementById('fileimg').files[0];
				
				$(".filename").html("图片为：" + fileimg)
				var fd = new FormData();
				fd.append('zurl', fileimg)
				//				fd.append("tye","1111")
				//				alert(fileimg)
				//				alert(fd.fileimg)
				console.log(document.getElementById('fileimg').files[0])
				$("#demo1").attr("src",URL.createObjectURL(file));
//				$.ajax({
//					type: "post",
//					url: baseurl + "/store/storeZheng",
//					data: fd,
//					//ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉
//					contentType: false,
//					//取消帮我们格式化数据，是什么就是什么
//					processData: false,
//					success: function(data) {
//						console.log(data)
//						if(data.meta.code == 200) {
//							console.log(data)
//							$(".logo").attr("src", data.data)
////							layer.alert('修改成功', function() {
////								window.parent.location.reload();
////							});
//						} else {
//							layer.alert("创建失败" + data.meta.msg);
//						}
//					}
//				});
			})

			function settijiao() {
				var fileimg = document.getElementById('fileimg').files[0];
				var fd = new FormData();
				fd.append('file', fileimg)
				fd.append('title', $(".title").val());
				fd.append('content', $(".content").val());
				$.ajax({
					type: "post",
					url: baseurl + "/tt/updateTt?id=1",
					data: fd,
					cache: false,
					processData: false,
					contentType: false,
					success: function(data) {
						console.log(data)
						if(data.meta.code == 200) {
							//alert('修改成功');
							layer.alert('修改成功', function() {
								window.parent.location.reload();
							});
						} else {
							layer.alert("创建失败" + data.meta.msg);
						}
					}
				})
			}
		</script>
	</body>

</html>